doc(FooterCounter): improve performance for ssr mode #6607
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
Reviewer's GuideThis PR refactors the FooterCounter component to offload runtime updates to a dedicated JavaScript module for SSR performance, replaces C#-based timers with JS interop via JSModuleAutoLoader, and includes related style and markup optimizations in sample dashboards, video links, and page CSS. Sequence diagram for FooterCounter runtime update via JS interopsequenceDiagram
participant Blazor as Blazor Component (FooterCounter)
participant JS as JavaScript Module (FooterCounter.razor.js)
Blazor->>JS: init(id, totalSeconds) on first render
JS->>JS: Start setInterval(tick, 1000)
JS->>Blazor: (no direct callback, JS updates DOM)
loop Every 30 seconds
Blazor->>JS: updateFooterCounter(id, totalSeconds)
JS->>JS: Update totalSeconds in Data
end
Blazor->>JS: dispose(id) on component dispose
JS->>JS: clearInterval(handler), remove Data
Class diagram for updated FooterCounter componentclassDiagram
class FooterCounter {
- string? Runtime
- readonly CancellationTokenSource _disposeTokenSource
- ConnectionHubOptions _options
+ OnInitialized()
+ OnAfterRenderAsync(bool firstRender)
+ InvokeInitAsync()
+ DisposeAsync(bool disposing)
}
FooterCounter --|> WebSiteModuleComponentBase
File-Level Changes
Assessment against linked issues
Possibly linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Hey @ArgoZhang - I've reviewed your changes - here's some feedback:
Blocking issues:
- User controlled data in methods like
innerHTML,outerHTMLordocument.writeis an anti-pattern that can lead to XSS vulnerabilities (link) - User controlled data in a
el.innerHTMLis an anti-pattern that can lead to XSS vulnerabilities (link)
General comments:
- The DisposeAsync override signature (protected override ValueTask DisposeAsync(bool disposing)) won’t be called by the Blazor runtime—override DisposeAsync() without parameters and invoke your JS module’s dispose(id) to clear the client‐side interval.
- Swapping VideoUrl.Any() for VideoUrl.Count > 0 may force full enumeration on IEnumerable; consider reverting to .Any() for a more efficient existence check.
- Silently catching all exceptions in OnAfterRenderAsync can hide issues—at minimum log or handle unexpected errors instead of swallowing them.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The DisposeAsync override signature (protected override ValueTask DisposeAsync(bool disposing)) won’t be called by the Blazor runtime—override DisposeAsync() without parameters and invoke your JS module’s dispose(id) to clear the client‐side interval.
- Swapping VideoUrl.Any() for VideoUrl.Count > 0 may force full enumeration on IEnumerable; consider reverting to .Any() for a more efficient existence check.
- Silently catching all exceptions in OnAfterRenderAsync can hide issues—at minimum log or handle unexpected errors instead of swallowing them.
## Individual Comments
### Comment 1
<location> `src/BootstrapBlazor.Server/Components/Components/FooterCounter.razor.js:13` </location>
<code_context>
+ const counter = Data.get(id);
+
+ counter.totalSeconds = (counter.totalSeconds || 0) + 1;
+ const now = Math.round(counter.totalSeconds, 0);
+
+ const days = Math.floor(now / (24 * 3600));
</code_context>
<issue_to_address>
Math.round does not accept a second argument.
Remove the second argument from Math.round, as it is ignored. If you need to round to a specific decimal place, consider using a different method.
</issue_to_address>
## Security Issues
### Issue 1
<location> `src/BootstrapBlazor.Server/Components/Components/FooterCounter.razor.js:21` </location>
<issue_to_address>
**security (javascript.browser.security.insecure-document-method):** User controlled data in methods like `innerHTML`, `outerHTML` or `document.write` is an anti-pattern that can lead to XSS vulnerabilities
*Source: opengrep*
</issue_to_address>
### Issue 2
<location> `src/BootstrapBlazor.Server/Components/Components/FooterCounter.razor.js:21` </location>
<issue_to_address>
**security (javascript.browser.security.insecure-innerhtml):** User controlled data in a `el.innerHTML` is an anti-pattern that can lead to XSS vulnerabilities
*Source: opengrep*
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
| const counter = Data.get(id); | ||
|
|
||
| counter.totalSeconds = (counter.totalSeconds || 0) + 1; | ||
| const now = Math.round(counter.totalSeconds, 0); |
Contributor
There was a problem hiding this comment.
issue: Math.round does not accept a second argument.
Remove the second argument from Math.round, as it is ignored. If you need to round to a specific decimal place, consider using a different method.
| const seconds = now % 60; | ||
|
|
||
| const pad = num => num.toString().padStart(2, '0'); | ||
| el.innerHTML = `Run ${pad(days)}.${pad(hours)}:${pad(minutes)}:${pad(seconds)}`; |
Contributor
There was a problem hiding this comment.
security (javascript.browser.security.insecure-document-method): User controlled data in methods like innerHTML, outerHTML or document.write is an anti-pattern that can lead to XSS vulnerabilities
Source: opengrep
| const seconds = now % 60; | ||
|
|
||
| const pad = num => num.toString().padStart(2, '0'); | ||
| el.innerHTML = `Run ${pad(days)}.${pad(hours)}:${pad(minutes)}:${pad(seconds)}`; |
Contributor
There was a problem hiding this comment.
security (javascript.browser.security.insecure-innerhtml): User controlled data in a el.innerHTML is an anti-pattern that can lead to XSS vulnerabilities
Source: opengrep
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #6607 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 739 739
Lines 31669 31669
Branches 4458 4458
=========================================
Hits 31669 31669
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
This was referenced Aug 15, 2025
This was referenced Aug 22, 2025
This was referenced Sep 3, 2025
This was referenced Sep 9, 2025
This was referenced Sep 16, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Link issues
fixes #6606
Summary By Copilot
Regression?
Risk
Verification
Packaging changes reviewed?
☑️ Self Check before Merge
Summary by Sourcery
Improve SSR performance by migrating FooterCounter timer logic to a client-side JavaScript module, refactoring the component lifecycle, and making related UI and style adjustments
Enhancements: